<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">


    <head th:fragment="head">


        <meta charset="utf-8" />
        <meta
                name="viewport"
                content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        <meta name="description" content="" />
        <meta name="author" content="" />






        <link
                href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900"
                rel="stylesheet"
        />


        <title>BoBO的个人网站</title>
        <!-- Bootstrap core CSS -->
        <link href="/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

        <!-- Additional CSS Files -->
        <link rel="stylesheet" href="/assets/css/fontawesome.css" />
        <link rel="stylesheet" href="/assets/css/templatemo-style.css" />
        <link rel="stylesheet" href="/assets/css/owl.css" />
        <link rel="stylesheet" href="/assets/css/lightbox.css" />
    </head>





    <div th:fragment="script">
        <!-- Scripts -->
        <!-- Bootstrap core JavaScript -->
        <script src="/vendor/jquery/jquery.min.js"></script>
        <script src="/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

        <script src="/assets/js/isotope.min.js"></script>
        <script src="/assets/js/owl-carousel.js"></script>
        <script src="/assets/js/lightbox.js"></script>
        <script src="/assets/js/custom.js"></script>
        <script>
            //according to loftblog tut
            $(".main-menu li:first").addClass("active");

            var showSection = function showSection(section, isAnimate) {
                var direction = section.replace(/#/, ""),
                    reqSection = $(".section").filter(
                        '[data-section="' + direction + '"]'
                    ),
                    reqSectionPos = reqSection.offset().top - 0;

                if (isAnimate) {
                    $("body, html").animate(
                        {
                            scrollTop: reqSectionPos
                        },
                        800
                    );
                } else {
                    $("body, html").scrollTop(reqSectionPos);
                }
            };

            var checkSection = function checkSection() {
                $(".section").each(function() {
                    var $this = $(this),
                        topEdge = $this.offset().top - 80,
                        bottomEdge = topEdge + $this.height(),
                        wScroll = $(window).scrollTop();
                    if (topEdge < wScroll && bottomEdge > wScroll) {
                        var currentId = $this.data("section"),
                            reqLink = $("a").filter("[href*=\\#" + currentId + "]");
                        reqLink
                            .closest("li")
                            .addClass("active")
                            .siblings()
                            .removeClass("active");
                    }
                });
            };

            $(".main-menu").on("click", "a", function(e) {
                e.preventDefault();
                showSection($(this).attr("href"), true);
            });

            $(window).scroll(function() {
                checkSection();
            });
        </script>
    </div>

</html>